<template>
  <div class="split-pane-wrapper" ref="outer">
    <div
      class="pane pane-left"
      :style="{
        width: leftOffsetPercent,
        paddingRight: `${this.triggerWidth / 2}px`
      }"
    >
      <slot name="left"></slot>
    </div>
    <div
      class="pane-trigger-con"
      @mousedown="handleMousedown"
      :style="{ left: triggerLeft, width: `${triggerWidth}px` }"
    >
    </div>
    <div
      class="pane pane-right"
      :style="{
        left: leftOffsetPercent,
        paddingLeft: `${this.triggerWidth / 2}px`
      }"
    >
      <slot name="right"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SplitPane',
  props: {
    value: {
      type: Number,
      default: 0.5
    },
    triggerWidth: {
      type: Number,
      default: 8
    },
    min: {
      type: Number,
      default: 0.1
    },
    max: {
      type: Number,
      default: 0.9
    }
  },
  data () {
    return {
      canMove: false,
      initOffset: 0
    }
  },
  computed: {
    leftOffsetPercent () {
      return `${this.value * 100}%`
    },
    triggerLeft () {
      return `calc(${this.value * 100}% - ${this.triggerWidth / 2}px)`
    }
  },
  methods: {
    handleClick () {
      this.leftOffset -= 0.02
    },
    handleMousedown (event) {
      document.addEventListener('mousemove', this.handleMousemove)
      document.addEventListener('mouseup', this.handleMouseup)
      this.initOffset =
        event.pageX - event.srcElement.getBoundingClientRect().left
      this.canMove = true
    },
    handleMousemove (event) {
      if (!this.canMove) return
      const outerRect = this.$refs.outer.getBoundingClientRect()
      let offsetPercent =
        (event.pageX -
          this.initOffset +
          this.triggerWidth / 2 -
          outerRect.left) /
        outerRect.width
      if (offsetPercent < this.min) offsetPercent = this.min
      if (offsetPercent > this.max) offsetPercent = this.max
      // this.$emit('input', offsetPercent)
      this.$emit('update:value', offsetPercent)
    },
    handleMouseup () {
      this.canMove = false
    }
  }
}
</script>
<style lang="stylus">
.split-pane-wrapper
  height 100%
  width 100%
  position relative
  .pane
    position absolute
    top 0
    height 100%
    overflow-x auto
    overflow-y auto
    &::-webkit-scrollbar
      width 5px
      height 5px
    &::-webkit-scrollbar-track
      box-shadow inset 0 0 6px rgba(0, 0, 0, 0.1)
      border-radius 10px
      background-color #F5F5F5
    &::-webkit-scrollbar-thumb
      border-radius 10px
      box-shadow inset 0 0 6px rgba(0, 0, 0, .1)
      background-color #ccc
    &-right
      right 0
      bottom 0
    &-trigger-con
      height 100%
      background #ebeef5
      border-top none
      border-bottom none
      position absolute
      top 0
      z-index 10
      user-select none
      cursor col-resize
      &:hover
        background #ccc
</style>
